<!DOCTYPE html>
<html>
<#include "include/header.html"/>
  <body id="game" class="gifts">
    <div class="page">
      <div class="content">
        <img src="${ctx}/resource/images/banner.png" class="banner">
        <div class="wrap">
         <#if championUser??>
				 <div class="info">
                     <div class="coins">我的活力币：<span>${championUser.energy_currency!}</span></div>
                 </div>  
				
				</#if>
          <!-- 导航栏 -->
          <nav>
            <ul>
              <li><a href="${ctx}/home/homePage">返回首页</a></li>
              <li><a href="${ctx}/home/forwardExchang">拼手气</a></li>
            </ul>
          </nav>
				
          <div class="list-wrapper" >

          <ul id="gift-list">
          <#list championPrizesList as b > 
            <li><div class="body" style="background-image: url('${server_uri!}${b.prisze_pic!}');">
              <div class="price">${b.need_currency!}</div>
              </div>
              <footer>
              <#if b.id == 'faec810377b44cd7a609e074e1db1ef5' >
              <span class="remain">还剩：不限</span>
                <#else>
                <span class="remain">还剩：${b.prisze_num!}份</span>
                </#if>
                <#if b.id == 'faec810377b44cd7a609e074e1db1ef5' >
                <a href="https://taoquan.taobao.com/coupon/unify_apply.htm?sellerId=1794882489&activityId=858fd3097efb4762be14e199e30f4801" ><img src="${ctx}/resource/images/game/gifts/btn.png" alt="" ></a> <!-- 兑换按钮 -->
                <#else>
                <img src="${ctx}/resource/images/game/gifts/btn.png" alt="" onclick="exchange('${b.id!}')"> <!-- 兑换按钮 -->
                </#if>
              </footer>
            </li>
          </#list>
          </ul> 
           </div>      
        </div>
        
        <!-- 兑换成功，填写信息 -->
        <div class="dialog success">
          <div class="d-body">
            <div class="inner">
              <img src="${ctx}/resource/images/game/wheel/success_head.png">
              <div id='gift_pic'><img src="${ctx}/resource/images/game/wheel/gift3.png" class="gift">
               <span class="gift-name"></span>
              </div>
              <p>
                请准确填写以下信息，以便工作人员安排发放奖品。<span>（如未准确填写的用户将视为自动放弃奖品）</span>
              </p>
              <form>
                <div class="row">
                  <label>姓名：</label>
                  <input id="real_name" type="text" />
                </div>
                <div class="row">
                  <label>电话：</label>
                  <input id="telephone" type="tel" />
                </div>
                <div class="row">
                  <label>地址：</label>
                  <textarea id="address"></textarea>
                </div>
                <div class="row form-msg"></div>
              </form>
            </div>
          </div>
          <div class="d-footer">
            <img src="${ctx}/resource/images/index/dialog_btn_back.png" class="btn btns back" alt="" onclick="dialogExchangPrizes()"> <!--返回按钮-->
            <img src="${ctx}/resource/images/index/dialog_btn_yes.png" class="btn btns yes" alt="" onclick="submit()"> <!--确认按钮-->
          </div>
        </div>

        <!-- 兑换失败 -->
        <div class="dialog fail">
          <div class="d-body" id="fail-message">
            <p class="message">系统繁忙 请稍后再试</p>
          </div>
          <div class="d-footer">
            <img src="${ctx}/resource/images/index/dialog_btn_back.png" class="btn one back" alt="" onclick="refleshPage()"> <!--返回按钮-->
          </div>
        </div>
         <!-- 兑换成功 -->
      <div class="dialog exchange-success">
        <div class="d-body" >
        </div>
        <div class="d-footer">
          <img src="${ctx}/resource/images/index/dialog_btn_back.png" class="btn one back" alt="" onclick="refleshPage()"> <!--返回按钮-->
        </div>
      </div>
      
      </div>
    </div>
    <div class="mask"></div>
<#include "include/foot.html"/>
 <script>
 var exchang_id="";
var prize_pic_url = "";
var prize_name = "";
		 <#if championUserExchang??>
       prize_pic_url="${server_uri!}${championUserExchang.prisze_pic!}";
        exchang_id="${championUserExchang.id!}";
        prize_name="${championUserExchang.prizse_name!}";
        var picUrl = "<img src='"+prize_pic_url+"' class='gift'><span class='gift-name'>"+prize_name+"</span>";
				$("#gift_pic").html(picUrl);
				//后端处理成功
				dialog(".success")
 </#if>
      //跳转到兑换主页
      function dialogExchangPrizes() {
		window.location.href="${ctx}/home/forwardExchang";
	}
	 //刷新页面
      function refleshPage() {
		window.location.href=window.location.origin + window.location.pathname
				+ window.location.search;
	}
      function styleCoin() {
        var str = $(".coins").find("span").text().trim();
        var html = "";
        for (var i = 0; i < str.length; i++) {
          if (str.length > 4) {
            html += ('<span class="coin-sm">' + str[i] + '</span>')
          } else if (str.length > 3) {
            html += ('<span class="coin-md">' + str[i] + '</span>')
          } else {
            html += ('<span class="coin-lg">' + str[i] + '</span>')
          }
        }
        $(".coins").find("span").html(html)
      }

     // styleCoin();
      function exchange(prizeId) {
      statistics(); //cnzz统计
      $.post("${ctx}/home/exchangPrizes",{
        	prize_id:prizeId,
        	content:"我在#来吧冠军#小样乳酸盐杯·全民冠军赛的拼手气环节中，成功兑换到了“用户抽到的奖品”！据说还有一大波豪礼及现金红包正在路上，你也来和我拼下手气吧！http://lbgj.fansiji.com/xyChampion/home/homePage?source=prize",
            pic:"/alidata/server/tomcat-7.0.54/webapps/xyChampion/resource/images/index/qd_dialog_banner_1.jpg"
			},function(data){
			 if(data.code==0){
			 //后端处理成功
			 exchang_id=data.exchang_id;
			 prize_name=data.prizse_name;
			 var gift_pic="<img src='"+data.prisze_pic+"' class='gift'><span class='gift-name'>"+prize_name+"</span>";
			 $("#gift_pic").html(gift_pic);
				dialog(".success");
			 }else{
				//后端处理失败
				 var msgHtm = "<p class='message'>" + data.msg + "</p>";
				 $("#fail-message").html(msgHtm);
				 dialog(".fail");
			 }
			},'json'); 
      }
     /*  nextPage1=function(pnum){
			$("#pageNum1").remove();
			$.post("${ctx}/home/getChampionPrizes",{
				 type:1, 
				 page:pnum+1
					},function(json){
						var htm="";
						var list=json.list;
						for(var i in list){
				            	htm+="<li style='background-image: url(${server_uri!}"+list[i].prisze_pic+");'>";
								htm+="<div class='price'>"+list[i].need_currency+"</div>";
								htm+="<footer>";
								htm+="<span class='remain'>还剩："+list[i].prisze_num+"份</span>";
								htm+="<img src='${ctx}/resource/images/game/gifts/btn.png' onclick='exchange("+list[i].id+")'>"; 
								htm+="</footer>";
								htm+="</li>";
						}
						if(json.pageNumber < json.totalPage){
							htm+="<li id='pageNum1' class='more' onclick='nextPage1(${"+json.pageNumber+"}); return false;'></li>";
						}
						$("#gift-list").append(htm);			
				},'json');
	  } */
      //提交个人信息
      function submit() {
      statistics(); //cnzz统计
		var real_name = $("#real_name").val();
		var telephone = $("#telephone").val();
		var address = $("#address").val();
		if (real_name == null || telephone == null || address == null
				|| real_name == "" || telephone == "" || address == "") {
				onError("请填写完整信息");
			return;
		}
		$.post("${ctx}/home/prizeExchange",{
        	exchang_id:exchang_id,
        	real_name : real_name,
			telephone : telephone,
			address : address
			},function(data){
			 if(data.code==0){
			 //后端处理成功
				dialog(".exchange-success");
			 }else{
				//后端处理失败
				 var msgHtm = "<p class='message'>" + data.msg + "</p>";
				 $("#fail-message").html(msgHtm);
				 dialog(".fail");
			 }
			},'json'); 
      }
    </script>
  </body>
</html>